<template>
    <div class="start">
        <Title :msg="msg" />
        <div class="link-open-window" @click="openUrl">准备工作</div>
        <ContextBox v-for="(item, index) in list" :key="index" :title="item['title']" :destList="item['destList']">
        </ContextBox>
        <el-button type="primary" @click="prevHandler" class="  prev-btn">返回</el-button>
        <el-button type="primary" @click="nextHandler" class="next-btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Title from '@/components/Title.vue'
import ContextBox from '@/components/ContextBox.vue'
import { WebviewWindow } from '@tauri-apps/api/window';

const router = useRouter()
const msg = ref<string>('快速开始')
const list = ref<Array<{
    title: string,
    destList: Array<string>
}>>([{
    title: '安装并运行',
    destList: [
        '1. 安装Tauti : pnpm create tauri-app@latest',
        '2. 编辑项目名：demo',
        '3. 选择前端技术栈 vue-ts',
        '4. 选择工程根目录：cd demo',
        '5. 安装前端依赖： pnpm install ',
        '6. 运行 pnpm run tauri dev'
    ]
}])

const nextHandler = () => {
    router.push({ path: '/dirstru' })
}
const prevHandler = () => {
    router.go(-1)
}
const openUrl = () => {
    const window = new WebviewWindow('readyWork', {
        url: "https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites",
        width: 900,
        height: 800
    })
    window.once('tauri://created', () => {
        console.log('created');
    })
    window.once('tauri://error', (e) => {
        console.log('error', e);
    })
}
</script>
<style lang='less' scoped>
.start {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }
}
</style>